import { Row, Col, Input, Select, Button, DatePicker } from 'antd'
import './index.scss'

const { RangePicker } = DatePicker
// 定义组件属性接口
interface FilterItem {
  type: string;
  key: string;
  label: string;
  options?: object[];
  placeholder?: string;
}
interface filterProps {
  items: FilterItem[],
  onChange?: (value: string | string[] | number | number[], key: string) => void,
  onSure?: () => void
  otherBtn?: any,
  prefix?: any,
  suffix?: any,

  // onReset?: () => void
}

const PageFilter: React.FC<filterProps> = ({ items, onChange, onSure, otherBtn, prefix, suffix }) => {

  const handleChange = (value: any, item: FilterItem) => {
    onChange && onChange(value, item.key)
  }
  const handleSure = () => {
    onSure && onSure()
  }
  // const handleReset = () => {
  //   onReset && onReset()
  // }

  return <Row className="filter-container" gutter={[16, 16]}>
    {prefix ? prefix : null}
    {items.map((item) => {
      if (item.type === 'input') {
        return <Col className="filter-item" xs={24} md={12} lg={8} xl={6} key={item.key}>
          <div className="label">{item.label}：</div>
          <Input onBlur={(val) => handleChange(val.target.value, item)} placeholder={item.placeholder || '请输入'} allowClear />
        </Col>
      } else if (item.type === 'select') {
        return <Col className="filter-item" xs={24} md={12} lg={8} xl={6} key={item.key}>
          <div className="label">{item.label}：</div>
          <Select
            allowClear
            placeholder="请选择"
            style={{ width: '100%' }}
            onChange={(val) => handleChange(val, item)}
            options={item.options || []}
          />
        </Col>
      } else {
        return <Col className="filter-item" xs={24} md={12} lg={8} xl={6} key={item.key}>
          <div className="label">{item.label}：</div>
          <RangePicker
            style={{ width: '100%' }}
            onChange={(val) => handleChange(val, item)}/>
        </Col>
      }
    })
    }
    {suffix ? suffix : null}
    <Col className="filter-item" xs={24} md={12} lg={8} xl={6}>
      <div className="flex-row flex-item">
        {/* <Button className="btn" onClick={handleReset}>重置</Button>*/}
        <Button className="btn" onClick={handleSure} type="primary">搜索</Button>
        {otherBtn}
      </div>
    </Col>
  </Row>
}

export default PageFilter